<template>
    <div class="red-form" v-if="is_show">

        <div id="red-form" :class="form_class">

            <!--S标题-->
            <h2>
                <span>填表后开红包</span>
                <i
                        class="close iconfont icon-guanbi"
                        @click="$emit('close')"
                >
                </i>
            </h2>
            <!--E标题-->

            <!--S表单内容-->
            <form-content
                    :form_id="form_id"
                    :red_id = "red_id"
                    :is_submit="true"
                    @success="$emit('success')"
            >
            </form-content>
            <!--E表单内容-->

        </div>

    </div>
</template>

<script>
import FormContent from "@/components/form-content"
export default {
    name: "red-form",
    data() {
      return {
          form_class: 'close'
      }
    },
    components: {
        FormContent
    },
    props: {
        // 是否显示
        is_show: {
            type: Boolean,
            default: false
        },
        // 表单id
        form_id: Number,
        // 红包id
        red_id: Number
    },
    mounted() {
        this.toggle()
    },
    methods: {
        /**
         * 显示隐藏区域
         */
        toggle() {
            if (this.is_show) {
                setTimeout(() => {
                    this.form_class = 'open'
                }, 100)
            } else {
                this.form_class = 'close'
            }
        }
    }
}
</script>

<style scoped lang="less" src="./red-form.less"></style>